<template>
  <div class="login">
    <earch  class="earch"  />
    <el-tabs v-model="activeName"  class="loginBox"  :stretch='true'>
      <el-tab-pane label="登入" name="log">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="form"
          label-width="100px"
        >
          <el-form-item  prop="name" label-width="30px" style="width: 90%;">
            <el-input v-model="ruleForm.name" placeholder="用户名"  autocomplete='on' autofocus></el-input>
          </el-form-item>
          <el-form-item  prop="passWord" label-width="30px" style="width: 90%;">
            <el-input v-model="ruleForm.passWord" placeholder="密码"  autocomplete='on' ></el-input>
          </el-form-item>
          <el-form-item  prop="yan" label-width="30px"  style="width: 60%;marginRight:20px;position:relative;">
            <el-input v-model="ruleForm.yan" placeholder="验证码"></el-input>
            <el-button type="primary" plain class="fy" @click="getYan" :disabled="isf">{{fay}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')" >登入</el-button >
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="zuce">
         <zuce   @goLogin="goLogin" />
       </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import getNum from '../utils/getNum'
import { defineComponent, getCurrentInstance, reactive, toRefs,watch } from "vue";
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import zuce from '../components/zuce.vue'
import earch from '../components/com/earch.vue'
export default defineComponent({
   components:{zuce,earch},
   setup() {
     interface login{
       name:string;
       password:number;
       yan:number
     }
    let state = reactive({
      activeName: "log",

      yzm:100000,
      isf:false,
      fay:'发送验证码',
      ruleForm: {
        name: "",
        passWord: '',
        yan: '',
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" },],
        passWord:[{required: true, message: "请输入密码", trigger: "blur"} ],
        yan:[{required: true, message: "请输入验证码", trigger: "blur"} ]
      },
    })
     //@ts-ignore    这里一定要写才能获取到ctx
     let {ctx}=getCurrentInstance()
     let router= useRouter()
     let store=useStore()
    
    //切换表头
    // let handleClick = (tab: any, event: any): void => {
    //   console.log(tab, event, "----");
    // };
    let goLogin=()=>{
      state.activeName='log'
    }

    //登入
    watch(()=>state.isf,()=>{
       state.fay=state.isf?'请稍后':'发送验证码'
    })

    let getYan= ()=>{
       state.isf=true
       state.yzm=getNum()
       let timer=setTimeout(()=>{
         ctx.$alert(`${ state.yzm}`,'验证码',{
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'success'
         })
         clearTimeout(timer)
         state.isf=false
       },2000)
    }
    let submitForm = (formName:any) => {
       ctx.$refs[formName].validate((valid:boolean) => {
          if (valid&&state.yzm===parseInt(state.ruleForm.yan)) {
            ctx.$message.success({
            message: '登入成功',
            type: 'success'
          })
          let user={
            name:state.ruleForm.name
          }
          store.dispatch('login',user)
          router.push('/home')
          } else {
            ctx.$message.error({
            message: '输入信息有误',
            type: 'error'
          })
            return false;
          }
        });
    };
    let resetForm=(formName:any)=>{
      ctx.$refs[formName].resetFields();
      localStorage.removeItem('user')
    }

    return {
      ...toRefs(state),
      goLogin,
      getYan,submitForm,resetForm
    };
  },
});
</script>
<style lang="less" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: url('../assets/img/xin.jpg') no-repeat;
  background-size:100% 100%;
}
.earch{

  margin-top: -40px;
}
.loginBox{
  position: absolute;
  right: 10%;
  top: 30%;
  width: 400px;
  padding: 5px;
  border: 2px solid #409EFF;
  box-shadow: 3px 3px 3px #8cabe9, -3px -3px 3px  #8cabe9,-3px 3px 3px #8cabe9,3px -3px 3px #8cabe9;
  border-radius: 5px;
}
.fy{
  position: absolute;
  right: -116px;
}
</style>